<template>
  <div class="flex-1 mt-3 overflow-y-auto overflow-x-hidden">
    <a-directory-tree
      v-if="treeData.length > 0"
      v-model:selected-keys="selectedKeys"
      default-expand-all
      :tree-data="treeData"
      :field-names="{ key: 'treeId' }"
      class="w-80"
    >
      <template #icon="{ template }">
        <img v-if="template" :src="IconDocument" width="14" class="pb-1" />
        <img v-else :src="IconDirectory" width="14" class="pb-1" />
      </template>
      <template #title="item">
        <div class="flex justify-between w-full" @click="selectTemplate(item)">
          <div v-if="item.template" class="mr-2 truncate w-[180px]" :title="item.templateName">{{ item.templateName }}</div>
          <div v-else class="mr-2 truncate w-[180px]" :title="item.categoryName">{{ item.categoryName }}</div>
          <div v-if="item.template" class="flex items-center justify-end pr-2">
            <template v-if="item.status === '1'">
              <span class="text-green-500">已提交</span>
            </template>
            <template v-else>
              <a-button type="text" :icon="h(FormOutlined)" size="small" class="mr-2" @click.stop="openChangeNameModal(item)" />
              <BaseButton size="small" type="text" danger :icon="h(CloseOutlined)" confirm-text="确定删除该目录?" @click="delTemplate(item.id)" />
            </template>
          </div>
        </div>
      </template>
    </a-directory-tree>
    <a-empty v-else-if="!loading" />
    <a-spin :spinning="loading" class="w-full h-full mt-4" />
  </div>
  <ChangeCategoryName v-model:open="changeNameOpen" :row-data="rowData" @success="emit('refresh')" />
</template>

<script setup>
import { ref, h } from 'vue'
import { message } from 'ant-design-vue'
import { FormOutlined, CloseOutlined } from '@ant-design/icons-vue'
import IconDirectory from '@/assets/icons/icon-directory.svg'
import IconDocument from '@/assets/icons/icon-document.svg'
import ChangeCategoryName from './ChangeName.vue'

const emit = defineEmits(['success', 'refresh', 'open'])
const props = defineProps({
  loading: {
    type: Boolean,
    default: true
  },
  sourceData: {
    type: Array,
    default: () => []
  }
})
const treeData = ref([])
const rowData = ref({})
const selectedKeys = ref([])
const changeNameOpen = ref(false)

// // 新增
// const onClickTemplate = (id) => {
//   emit('open', { open: true, id })
// }

const selectTemplate = (item) => {
  if (item.template) {
    selectedKeys.value = [item.id]
  }
  emit('success', item.template ? item : null)
}
const delTemplate = async (id) => {
  const { code, msg } = await post('/emr/emrCategory/doDelTempleteFromEmrCategory', { id })
  if (code !== 0) return message.error(msg)
  emit('refresh')
}
const openChangeNameModal = (item) => {
  rowData.value = item
  changeNameOpen.value = true
}
watch(
  () => props.sourceData,
  (val) => {
    selectedKeys.value = []
    treeData.value = val
  }
)

const setSelectedKeys = (key) => {
  selectedKeys.value = [key]
}
defineExpose({
  setSelectedKeys
})
</script>
<style lang="less" scoped>
.icon-color {
  color: var(--primary-color);
}
:deep(.ant-tree-treenode) {
  display: flex;
  width: 100%;
  padding: 8px 0;
  button:not(.ant-btn-dangerous) {
    color: var(--primary-color);
  }
  .ant-tree-node-selected {
    button:not(.ant-btn-dangerous) {
      color: #fff;
    }
  }
  &:before {
    bottom: 0 !important;
  }
  .ant-tree-node-content-wrapper {
    display: flex;
    align-items: center;
    .ant-tree-title {
      flex: 1;
    }
  }
}
:deep(.ant-tree-indent-unit) {
  width: 12px !important;
}
</style>
